import ContentLoader, { Rect } from 'react-content-loader/native';
import Header, { contentX, headerHeight } from './header';
import Images from './images';

type SvgProps = {
  width: number;
}

const itemSpace = 12;
const imageTotal = 3;
const titleHeight = 8;
const descHeight = 72;
const titleY = headerHeight + itemSpace;
const title2Y = titleY + titleHeight * 2;
const imagesY = title2Y + titleHeight + itemSpace;

const loader = (props: SvgProps) => {
  const { width } = props;
  const rWidth = width - contentX;
  const imgSize = (rWidth - (imageTotal - 1) * 4) / 3;
  const descY = imagesY + imgSize + itemSpace;
  const footerY = descY + descHeight + itemSpace;

  return (
    <ContentLoader
      width={width}
      height={footerY + 20}
      backgroundColor='#ececec'
      foregroundColor="#f9f9f9"
      viewBox={`0 0 ${width} ${footerY + 20}`}
    >
      <Header svgWidth={width} />
      <Rect x={contentX} y={titleY} rx={5} width={rWidth} height={titleHeight} />
      <Rect x={contentX} y={title2Y} rx={5} width={rWidth / 1.5} height={titleHeight} />
      <Images y={imagesY} imageSize={imgSize} total={imageTotal} />
      <Rect x={contentX} y={descY} rx={4} height={descHeight} width={rWidth} />
      <>
        <Rect rx={4} height={20} width={100} x={contentX} y={footerY} />
        <Rect rx={4} height={20} width={60} x={width - 60} y={footerY} />
        <Rect rx={4} height={20} width={60} x={width - (60 * 2 + itemSpace)} y={footerY} />
      </>
    </ContentLoader>
  );
}

export default loader;